<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<title>主页</title>

    <link rel="stylesheet" type="text/css" href="../../../plugins/bootstrap/3.3.7/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/jquery-easyui/1.8.6/themes/gray/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/jquery-easyui/1.8.6/themes/icon.css" />
    <!-- font-awesome图标字体 -->
    <link rel="stylesheet" href="../../../plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/jquery.json-editor/dist/jsoneditor.css" />
   
    <link rel="stylesheet" type="text/css" href="../../../css/zbootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/zeasyui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    
    <script type="text/javascript" src="../../../plugins/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../../plugins/jquery-rstorage/1.3.2/jquery.rStorage.min.js"></script>
    <script type="text/javascript" src="../../../plugins/jquery-form/4.3.0/jquery.form.min.js"></script>
    
    <script type="text/javascript" src="../../../plugins/jquery.json-editor/dist/jsoneditor.js"></script>
    
    <script type="text/javascript" src="../../../plugins/jquery-easyui/1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../js/zGlobal.js"></script>
    <script type="text/javascript" src="../../../js/zApi.js"></script>
    <script type="text/javascript" src="../../../js/zUtil.js"></script>
    <script type="text/javascript" src="../../../js/zAlert.js"></script>
    <script type="text/javascript" src="../../../js/zDict.js"></script>
    <script type="text/javascript" src="../../../js/zTable.js"></script>
    <script type="text/javascript" src="../../../js/zDialog.js"></script>
    <script type="text/javascript" src="../../../js/zForm.js"></script>
    
    <![if IE]>

    <![endif]>

</head>
<style>
.jsoneditor-poweredBy{
    display: none;
}
</style>
<body >

  <div class="easyui-layout" data-options="fit:true"> 
   <div class="main-content"> 
   
    <div id="p-all" class="easyui-layout" data-options="fit:true,border:false" style="border: 0px solid #D8D9E5;"> 
<!--       <div data-options="region:'west',split:true,border:false,expandMode:'dock',minWidth:300,maxWidth:600" style="overflow: hidden;width:50%;border-right:1px solid rgb(210, 208, 208);">
        <div  style="height:100%;overflow: auto;padding: 5px;">
         <textarea id="jsonText" class="form-control" style="width:100%;height:100%;resize: initial;"></textarea>
        </div>
      </div> -->
      <div data-options="region:'center',split:true,border:false" style="overflow: hidden;width:auto;">
        <div  style="height:100%;overflow: auto;padding: 5px;">
        <div id="jsonContent" style="height: 100%;"></div>
        </div>
           <div id="textModeSelection" style="display:none;">
    <b>Selection:</b><div id="textRange"></div>
    <b>Text:</b><div id="selectedText"></div>
  </div>
  <div id="treeModeSelection">
    <b>Selection:</b>
    <div id="selectedNodes"></div>
  </div>
      </div>
      
    </div>
    
   </div> 
  </div>

    
    <script>
    var JSONeditor= null;
    $(function(){
         const container = $("#jsonContent")[0];
         const options = {
           mode: 'code',
           modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
           onError: function (err) {
             alert(err.toString())
           },
           onModeChange: function (mode) {
                  const treeMode = document.getElementById('treeModeSelection')
                  const textMode = document.getElementById('textModeSelection')

                  treeMode.style.display = textMode.style.display = 'none'

                  if (mode === 'code' || mode === 'text') {
                    textMode.style.display = 'inline'
                  } else {
                    treeMode.style.display = 'inline'
                  }
                },
                indentation: 4,
                escapeUnicode: true,
                onTextSelectionChange: function(start, end, text) {
                  const rangeEl = document.getElementById('textRange')
                  rangeEl.innerHTML = 'start: ' + JSON.stringify(start) + ', end: ' + JSON.stringify(end)
                  const textEl = document.getElementById('selectedText')
                  textEl.innerHTML = text
                },
                onSelectionChange: function(start, end) {
                  const nodesEl = document.getElementById('selectedNodes')
                  nodesEl.innerHTML = ''
                  if (start) {
                    nodesEl.innerHTML = ('start: '  + JSON.stringify(start))
                    if (end) {
                      nodesEl.innerHTML += ('<br/>end: '  + JSON.stringify(end))
                    }
                  }
                }
         };
         
         JSONeditor = new JSONEditor(container, options, null)
    });
    function refreshJSON(json){
        JSONeditor.set(json);
    }
   </script>


</body>
</html>